<template>
  <ul class="image">
    <div class="imgbox">
      <!-- <dd class="addimg" @click="openMediaLibrary" :style="{ marginLeft: '18px' }">
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
          <IconPlus class="icon" />
        </Tooltip>
      </dd> -->
      <dd class="addimg">
        <FileInput @change="files => insertImageElement(files)">
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
            <IconPlus class="icon" />
            </Tooltip>
        </FileInput>
        </dd>

      <dd v-for="(item, i) in imgList.data" :key="i" draggable="true"
        :style="{ marginLeft: i % 2 == 0 ? '10px' : '18px' }" @dragend='drawImage($event, item.fileUrl, item.appFileSize)
        '>
        <!-- <img :src="item.fileAvatar" width="120" /> -->
        <!-- <div class="img" :style="`background:url(${item.fileAvatar}) center no-repeat; background-size: cover;`"></div> -->
        <a-image :src="`${item.fileAvatar}?${random}`">
          <template #placeholder>
            <a-image
              :src="`${item.fileAvatar}?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200`"
              :preview="false" />
          </template>
        </a-image>
      </dd>
    </div>
  </ul>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import useCreateElement from '@/hooks/useCreateElement'
import { getImageDataURL } from '@/utils/image'
import { videoImageList} from "@/api/editor"
import { useEditorStore } from '@/store'
const editorStore = useEditorStore()

export default defineComponent({
  name: 'image-pool',
  emits: ['select'],
  setup(props, { emit }) {
    let imgList = reactive({
      data: []
    })
    const {
      createImageElement,
    } = useCreateElement()
    const drawImage = ($event: MouseEvent, url: string, imageSize: number) => {
      emit('select', { url, $event, imageSize })
    }
    const getImgList = () => {
      videoImageList({
        fileType: 1,
        pageNum:1,
        pageSize:999999,
      }).then((res:any) => {
        imgList.data = res.data.data.list
      })
    }

    const insertImageElement = (files: File[]) => {
      files.forEach((item: any) => {
        const imageFile = item
        if (!imageFile) return
        const position = {
          left: 0,
          top: 0,
          width: 400,
          height: 400
        }
        getImageDataURL(imageFile).then(dataURL => createImageElement(position, dataURL,0))
      })
      
    }


    // const insertImageElement = (url: string) => {

    //   const position = {
    //     left: 0,
    //     top: 0,
    //     width: 400,
    //     height: 400
    //   }
    //   createImageElement(position, url)
    // }

    const openMediaLibrary = () => {
      editorStore.setSourceType('1')
      editorStore.setMediaCategroy('image')
      editorStore.setCloudToggle(true)
    }

    

    onMounted(() => {
      getImgList()
    })

    return {
      imgList,
      drawImage,
      getImgList,
      openMediaLibrary,
      insertImageElement,
      random: ref()
    }
  },
})
</script>

<style lang="scss" scoped>
.img {
  width: 130px;
  height: 90px;
  border-radius: 8px;
}

::v-deep(.ant-image-img) {
  min-height: 122px;
  object-fit: cover;
}

.addimg {
  margin-left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: $borderColor;
  border: 1px solid $contentTextColor;
  cursor: pointer !important;

  .i-icon {
    color: #fff;
  }

  i {
    transition: .5s all ease;
  }

  .file-input {
    line-height: 37px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:hover {
    i {
      transform: scale(1.2);
    }
  }
}

.imgbox {
  padding: 0;
  width: 290px;
  height: auto;
  overflow: hidden;

  dd {
    float: left;
    width: 122px;
    height: 122px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 8px;

    &:hover {
      cursor: move;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>